<template>
  <div class="item-chart" v-if="item.id">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span style="color:#5cd9e8">
          <icon name="chart-bar" width="0.3rem" height="0.3rem"></icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2" style="line-height: 0.3rem;font-size: 0.2rem;">{{item.title}}</span>
          <dv-decoration-3 style="width:3.2rem;height:.3rem; position:relative;top:-.0375rem;" />
        </div>
      </div>
      <div class="d-flex jc-center">
        <div class="no-data" :style="{opacity}">暂无数据</div>
        <div :id="item.id" style="width: 100%;height:2.5rem;transform: translateY(-0.08rem);"></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
      item: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        opacity: 0.6
      };
    },
    watch: {
      item: {
        handler(val) {
          this.draw()
        },
        deep: true
      }
    },
    mounted() {},
    methods: {
      draw() {
        this.opacity=0.6
        this.myChart = this.$echarts.init(document.getElementById(this.item.id))
        let data = []
        this.item.data.forEach(it => {
          this.opacity=0
          data.push({
            value: it.value||0,
            name: it.title,
            itemStyle: {
              color: it.color
            }
          })
        })
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          series: [{
            name: this.item.title,
            type: 'pie',
            radius: ['25%', '45%'],
            labelLine: {
              length: 20
            },
            minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            avoidLabelOverlap: true, //是否启用防止标签重叠策略

            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  ',
              color: 'white',
              backgroundColor: '#0352be',
              borderColor: 'rgba(255,255,255,0.5)',
              borderWidth: 0,
              borderRadius: 4,
              fontSize: 20,
              normal: {
                formatter(v) {
                  // console.log(v,'----');
                  return v.name + ':' + Math.round(v.percent) + '%'
                },
                textStyle: {
                  fontSize: 14,
                  borderWidth: 0,
                  color: '#FFF'

                },
              },
            },
            data
          }]
        }
        this.myChart.setOption(option);
      },
      changeTiming() {
        setInterval(() => {
          this.changeNumber();
          this.draw();
        }, 3000);
      },
      changeNumber() {
        this.numberData.forEach((item, index) => {
          item.value += (Math.random() - 0.5) * 20;
        });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .item-chart {
    padding: 0.1rem;
    height: 3.1rem;
    border-radius: 0.0625rem;
    .no-data{
      position: absolute;
      width: 100%;
      text-align: center;
      top:1.4rem;
    }
    .bg-color-black {
      height: 2.9rem;
      border-radius: 0.125rem;
    }

    .text {
      color: #c3cbde;
    }

    .chart-box {
      margin-top: 0.2rem;
      width: 2.125rem;
      height: 2.125rem;

      .active-ring-name {
        padding-top: 0.125rem;
      }
    }

    .bottom-data {
      .item-box {
        float: right;
        position: relative;
        width: 50%;
        color: #d3d6dd;

        // 金币
        .coin {
          position: absolute;
          left: 0.1rem;
          top: 0.2125rem;
          font-size: 0.25rem;
          color: #ffc107;
        }

        .colorYellow {
          color: yellowgreen;
        }
      }
    }
  }
</style>
